<template>
  <div class="product-horizontal-card mb-3">
    <!-- 左侧：产品图片 -->
    <div class="card-image">
      <el-image :src="product.productLogo" fit="cover" style="width: 100%; height: 100%; border-radius: 8px;"
        :alt="product.productShortName" />
    </div>

    <!-- 右侧：产品信息 -->
    <div class="card-content relative">
      <!-- 第一行：产品名称 + 类型 + 所属机构 + 期望利率 -->
      <div class="row">
        <div class="field">
          <div class="label">产品名称</div>
          <div class="value">{{ product.productShortName }}</div>
        </div>
        <div class="field">
          <div class="label">产品类型</div>
          <div class="value">{{ product.productType }}</div>
        </div>
        <div class="field">
          <div class="label">所属机构</div>
          <div class="value">{{ product.belongInstitutionName }}</div>
        </div>
      </div>

      <!-- 第二行：额度范围 + 贷款期限 + 查看详情按钮 -->
      <div class="row">
        <div class="field">
          <div class="label">额度范围</div>
          <div class="value amount">
            {{ formatAmount(product.amountLimitLower) }} ~ {{ formatAmount(product.amountLimitUpper) }} 万元
          </div>
        </div>
        <div class="field">
          <div class="label">贷款期限</div>
          <div class="value">{{ product.loanPeriodLimitLower }} ~ {{ product.loanPeriodLimitUpper }} 月</div>
        </div>

        <div class="field">
          <div class="label">期望利率</div>
          <div class="value">{{ product.interestRateLimitLower }}% ~ {{ product.interestRateLimitUpper }}%</div>
        </div>
      </div>
      <!-- <div class="field action">
        <el-button type="primary" size="small" plain @click="viewDetails">查看详情</el-button>
      </div> -->
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

// 定义产品类型（TypeScript 接口）
interface Product {
  productShortName: string
  productType: string
  productLogo: string
  belongInstitutionName: string
  amountLimitLower: number
  amountLimitUpper: number
  interestRateLimitLower: number
  interestRateLimitUpper: number
  loanPeriodLimitLower: number
  loanPeriodLimitUpper: number
}

defineProps({
  product: {
    type: Object as () => Product,
    default: () => ({})
  }
})

// 示例产品数据


// 格式化金额（单位：万元）
const formatAmount = (value: number): string => {
  if (typeof value !== 'number') return '--'
  return value >= 10000 ? (value / 10000).toFixed(2) + '亿' : value.toString()
}

const viewDetails = () => {
  alert('查看详情')
}
</script>

<style scoped>
.product-horizontal-card {
  display: flex;
  width: 100%;
  max-width: 800px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  background-color: #fff;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: #4f5973;
}

.card-image {
  width: 120px;
  height: 120px;
  margin: 16px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
}

.card-content {
  flex: 1;
  padding: 16px 16px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.row {
  display: flex;
  gap: 16px;
  align-items: center;
}

.field {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.label {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
}

.value {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 额度数值：使用主色调强调 */
.value.amount {
  font-size: 14px;
  font-weight: 500;
  color: #4f5973;
}

/* 操作按钮样式 */
.action {
  position: absolute;
  right: 15px;
  bottom: 15px;
}

.action .el-button {
  width: 160px;
  border-color: #4f5973;
  color: #4f5973;
  font-size: 14px;
}

.action .el-button:hover {
  background-color: #4f5973;
  color: white;
  border-color: #4f5973;
}

/* 响应式：小屏幕下每行最多显示两个字段 */
@media (max-width: 600px) {
  .row {
    flex-wrap: wrap;
  }

  .field {
    flex: 1 1 calc(50% - 8px);
    /* 每行两个 */
  }

  .card-image {
    width: 100px;
    height: 100px;
    margin: 12px;
  }
}
</style>
